<template>
  <div class="main">
    <div id="xy"><h1>Echarts</h1></div>
    <div class="left">
      <h1>Mysql数据统计</h1>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="tag" label="数据库名" width="180">
        </el-table-column>
        <el-table-column prop="cnt" label="总量" width="180"> </el-table-column>
      </el-table>
      <h1>Es数据统计</h1>
      <el-table :data="tableData1" style="width: 100%">
        <el-table-column prop="tag" label="数据库名" width="180">
        </el-table-column>
        <el-table-column prop="cnt" label="总量" width="180"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { esSqlCount } from "@/api/data";
export default {
  data() {
    return {
      tableData: "",
      x_mysql: [],
      x_es: [],
      y_mysql: [],
      y_es: []
    };
  },
  created() {
    esSqlCount("/data/esmysqlcount").then(res => {
      if (res.code === 200) {
        this.tableData = res.data.mysql;
        this.tableData1 = res.data.es;
        for (var i = 0; i < res.data.mysql.length; i++) {
          this.x_mysql.push(res.data.mysql[i].tag);
          this.y_mysql.push(res.data.mysql[i].cnt);
        }
        for (var i = 0; i < res.data.es.length; i++) {
          this.x_es.push(res.data.es[i].tag);
          this.y_es.push(res.data.es[i].cnt);
        }
      }
    });
  },
  methods: {
    dataCount() {
      var myCharts3 = this.$echarts.init(document.getElementById("xy"));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        color: ["#f8f106", "#fe7576", "#a9b0d3", "#476fd4"],
        grid: [
          { x: "7%", y1: "7%", height: "35%", left: "10%" },

          { x: "7%", y2: "7%", height: "35%", left: "10%", bottom: "5%" }
        ],
        legend: {
          data: ["Es数据总数", "Es数据总数", "Mysql数据总数", "Mysql数据总数"]
        },
        xAxis: [
          {
            show: false, //隐藏了x轴
            type: "category",
            gridIndex: 0, //对应前面grid的索引位置（第一个）
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              //interval:showNum,  //x轴显示的数量，我这里是动态算的
            },
            // data: ["2013", "2014", "2015", "2016", "2017", "2018", "2019"]
            data: this.x_es
          },
          {
            type: "category",
            gridIndex: 1, //对应前面grid的索引位置（第二个）
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              //interval:showNum,
            },
            data: this.x_es
            // data: ["2013", "2014", "2015", "2016", "2017", "2018", "2019"]
          }
        ],
        //y轴，不管有几个x轴，几个y轴，或者图，只要找到他对应的grid图的序号索引就可以精准匹配

        yAxis: [
          {
            type: "value",
            gridIndex: 1, //对应前面grid的索引位置（第二个）
            name: "Es数据总数",
            //nameLocation:'end',
            splitLine: { show: false },
            nameLocation: "middle",
            nameTextStyle: {
              padding: 25
            },
            position: "right",
            axisLine: {
              lineStyle: {
                //color: colors[0]
              }
            },
            axisLabel: {
              // formatter: "{value}"
              formatter: this.y_es
            }
          },
          {
            type: "value",
            gridIndex: 1,
            nameLocation: "middle",
            name: "Es数据总数",
            nameTextStyle: {
              padding: 25
            },
            splitLine: { show: false },
            position: "left",
            axisLine: {
              lineStyle: {
                //color: colors[2]
              }
            },
            axisLabel: {
              // formatter: "{value}"
              formatter: this.y_es
            }
          },
          {
            type: "value",
            gridIndex: 0,
            name: "Mysql数据总数",
            nameTextStyle: {
              padding: 40
            },
            position: "left",
            nameLocation: "middle",
            splitLine: { show: false },
            //nameLocation: 'start',//y轴name的位置
            //inverse: true,
            axisLine: {
              lineStyle: {
                //color: '#f8f106'
              }
            },
            axisLabel: {
              // formatter: "{value}",
              formatter: this.y_mysql,
              textStyle: {
                fontSize: 12 //y轴坐标轴上的字体大小
              }
            }
          },
          {
            type: "value",
            gridIndex: 0,
            name: "Mysql数据总数",
            nameTextStyle: {
              padding: 10
            },
            nameLocation: "middle",
            position: "right",
            //nameLocation: 'start',//y轴name的位置
            //inverse: true,
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                //color: colors[1]
              }
            },
            axisLabel: {
              // formatter: "{value}",
              formatter: this.y_mysql,
              textStyle: {
                fontSize: 12 //y轴坐标轴上的字体大小
              }
            }
          }
        ],

        series: [
          {
            name: "Mysql数据总数",
            // type:'bar',
            // name: "累产气量"
            type: "bar",
            xAxisIndex: 0,
            yAxisIndex: 2,

            data: this.y_mysql
          },
          {
            name: "Mysql数据总数",
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 3,
            data: this.y_mysql
          },
          {
            name: "Es数据总数",
            type: "bar",

            xAxisIndex: 1,
            yAxisIndex: 0,

            data: this.y_es
          },
          {
            name: "Es数据总数",
            type: "line",
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: this.y_es
          }
        ]
      };

      myCharts3.setOption(option);
    }
  },
  mounted() {
    setTimeout(() => {
      this.dataCount();
    }, 400);
  }
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 670px;
  border: 1px solid black;
}
#xy {
  width: 50%;
  height: 670px;
  float: left;
}
.left {
  width: 49%;
  float: right;
}
</style>
